<template>
   <div class="goodsitem" @click="itemCick">
     <div>
        <img v-lazy="showImage" alt="" @load="imgload">
         <p class="test">{{goodsitem.title}}</p>
         <span class="price">{{goodsitem.price}}</span>
         <span class="cfav">{{goodsitem.cfav}}</span>
       </div>
   </div>
</template>

<script>

  export default {
    name: "goodsitem",
    props:{
      goodsitem:{
        type:Object
      }
    },
    computed:{
      showImage(){
        return this.goodsitem.image||this.goodsitem.show.img
      }
    },
    methods:{
      imgload(){
        //通过事件总线发出事件
        if(this.$route.path.includes('/home')) {
          this.$bus.$emit('itemImgLoad')
        }  else if(this.$route.path.includes('/detail')){

          this.$bus.$emit('detailItemImgLoad')
        }
      },
      itemCick(){
         this.$router.push('/detail/'+this.goodsitem.iid)
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>
.goodsitem{
  width: 50%;
  position: relative;
}
.goodsitem div{
   display: block;
   text-align: center;

}
.goodsitem img{
  position: relative;
  width: 96%;
  height: 250px;
  border-radius: 4px;
}
.goodsitem .test{
  width: 96%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  }
.goodsitem span:nth-of-type(1){
    position:relative;
     left: -40px;
     width: 30px;
     color: var(--color-high-text);
  }
 .goodsitem span:nth-of-type(2){
  position:relative;
  right: -10px;
  color: var(--color-high-text);
}
 .goodsitem span:nth-of-type(2)::before{
    content: "";
    position: absolute;
    left: -15px;
    width: 14px;
    height: 14px;
    background: url("../../../assets/img/common/collect.svg") 0 0/14px 14px
}
</style>
